<template>
  <el-scrollbar style="height: 100%;width: 17%;background-color: #333744" >
    <div class="ns-tree-com tree-com" style="padding-top:0 ">
      <el-input
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>
      <el-tree
        class="filter-tree"
        :data="meauData"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        :expand-on-click-node="false"
        @node-click="handleCheck"
        ref="tree">
        <div class="custom-node" slot-scope="{node, data}">
          <div class="node-left">
            <span style="margin-left: 7px;">{{data.parent.catalogName}}</span>
          </div>
        </div>
      </el-tree>
    </div>
  </el-scrollbar>
</template>

<script>
  import  eventBus from '../../assets/js/eventBus'
  export default {
    name: 'zhglLeft',
    data() {
      return {
        filterText: '',
        meauData: [],
        defaultProps: {
          children: 'children',
          label: 'catalogName'
        },
        newArr:[]
      };
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    created () {
      this.getMapMeau()
    },
    methods: {
      dgArr(arr){
        for(let i=0;i<arr.length;i++){
          if(arr[i].children.length!=0){
            this.dgArr(arr[i].children)
          }else {
            this.newArr.push((arr[i].parent.id))
          }
        }
      },
      async handleCheck(data, checked) {
        this.newArr=[];
        if(data.children.length!=0){
          this.dgArr(data.children)
        }else {
          this.newArr.push((data.parent.id))
        }
        //const {data:result}= await this.$http.post('/api/v1.0/achievements/findAllByCatalogIdAndAchievementsTypeIds',{achievementsTypeId:1,catalogIds:this.newArr})
        eventBus.$emit('mlData',this.newArr)
      },
      handleNodeClick(data) {
        //console.log(data);
        console.log(this.$refs.tree.getCheckedNodes());
      },
      filterNode(value, data2) {
        if (!value) return true;
        return data2.label.indexOf(value) !== -1;
      },
      async getMapMeau () {
        const { data: res } = await this.$http.get('/api/v1.0/resultIntegration/findAll')
        if (res.status !== '3000') {
          return this.$message.error(res.message)
        }
        this.meauData=res.data;
        /* var newData;
         for(var item in res.data){
           console.log(res.data)
           newData={id:res.data[item].parent.id,label:res.data[item].parent.catalogName,children:res.data[item].children}
           this.meauData.push(newData);
           console.log(this.meauData)
         }*/
      },
    },

  }
</script>

<style lang="less" scoped>
  .ns-tree-com.tree-com{
    padding:8px;
    overflow: hidden;
    .el-tree{
      padding-top: 20px;
      padding-left: 20px;
      background-color:#333744;

      .el-tree-node{
        position: relative;
        padding: 222px;
        .el-tree-node__content{
          padding: 30px !important;
        }
      }
      .el-tree-node__children{
        padding-left: 12px;
        span{
          font-size: 14px;
          color: #FFF;
        }
      }
    }
    .custom-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 18px;
      padding-right: 8px;
      color: #FFF327;
      .node-right{
        display: none;
      }
    }
  }
  .el-tree /deep/ .el-tree-node__expand-icon.expanded
  {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  //有子节点 且未展开
  .el-tree /deep/ .el-icon-caret-right:before
  {
    background: url("../../assets/img/文件夹.png") no-repeat 0 0px;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
  }
  .el-tree /deep/ .el-tree-node__content:hover{
    background-color: #7b98bc;
  }


    //有子节点 且已展开
  .el-tree /deep/ .el-tree-node__expand-icon.expanded.el-icon-caret-right:before
  {
    background: url("../../assets/img/文件夹,打开.png") no-repeat 0 0px;
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    font-size: 18px;
    background-size: 18px;
  }
  //没有子节点
  .el-tree /deep/.el-tree-node__expand-icon.is-leaf::before
  {
    background: url("../../assets/img/文件.png") no-repeat 0 1px;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  /deep/ .el-tree-node__content{
    padding-top: 3px;
  }

  /deep/ .el-tree-node.is-current > .el-tree-node__content {
    background-color: red !important;
  }
</style>
